<template>
    <div>
        <!-- 轮播图 -->
        <van-swipe
            :autoplay="5000"
            lazy-render
            class="h-[600px] m-b-[20px]"
        >
            <van-swipe-item
                v-for="image in images"
                :key="image"
            >
                <img
                    :src="image"
                    class="wh-full"
                />
            </van-swipe-item>
        </van-swipe>
        <!-- 常见问题解答 -->
        <div class="bg-[#fff] p-t-[60px] p-x-[10px] problem-answer">
            <van-tabs v-model:active="activeName">
                <van-tab
                    :title="item.label"
                    :name="item.label"
                    v-for="item in tabList"
                    :key="item.value"
                >
                    <van-collapse
                        v-model="openedIndex"
                        accordion
                    >
                        <van-collapse-item
                            :name="index"
                            v-for="(problem, index) in item.tablist"
                            :key="problem.title"
                            :is-link="false"
                        >
                            <template #title>
                                <div class="flex items-center">
                                    <van-icon name="arrow" />
                                    <span class="badge flex items-center justify-center flex-shrink-0">问</span>
                                    <span class="m-l-[15px]">{{ problem.title }}</span>
                                </div>
                            </template>
                            <p class="answer-content">{{ problem.detail }}</p>
                        </van-collapse-item>
                    </van-collapse>
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>

<script setup lang="ts">
    const images = [
        'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
        'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
    ];

    const tabList = ref([
        {
            label: '呼吸机',
            value: 0,
            tablist: [
                {
                    title: '问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题',
                    detail: '说明说明说明说明说明说明说明说明',
                },
                { title: '问题问题问题问题问题问题问题', detail: '说明说明说明说明说明说明说明说明' },
                { title: '问题问题问题问题问题问题问题', detail: '说明说明说明说明说明说明说明说明' },
                { title: '问题问题问题问题问题问题问题', detail: '说明说明说明说明说明说明说明说明' },
                { title: '问题问题问题问题问题问题问题', detail: '说明说明说明说明说明说明说明说明' },
                { title: '问题问题问题问题问题问题问题', detail: '说明说明说明说明说明说明说明说明' },
                { title: '问题问题问题问题问题问题问题', detail: '说明说明说明说明说明说明说明说明' },
                { title: '问题问题问题问题问题问题问题', detail: '说明说明说明说明说明说明说明说明' },
                { title: '问题问题问题问题问题问题问题', detail: '说明说明说明说明说明说明说明说明' },
                { title: '问题问题问题问题问题问题问题', detail: '说明说明说明说明说明说明说明说明' },
                { title: '问题问题问题问题问题问题问题', detail: '说明说明说明说明说明说明说明说明' },
                { title: '问题问题问题问题问题问题问题', detail: '说明说明说明说明说明说明说明说明' },
            ],
        },
        { label: '输液管理', value: 1 },
        {
            label: '其他',
            value: 1,
            tablist: [
                { title: '问题问题问题问题问题问题问题', detail: '说明说明说明说明说明说明说明说明' },
                { title: '问题问题问题问题问题问题问题', detail: '说明说明说明说明说明说明说明说明' },
                { title: '问题问题问题问题问题问题问题', detail: '说明说明说明说明说明说明说明说明' },
            ],
        },
    ]);

    const activeName = ref('呼吸机');
    const openedIndex = ref();
</script>

<style lang="scss" scoped>
    :deep(.van-tabs) {
        .van-tabs__line {
            display: none;
        }

        .van-tabs__nav {
            background-color: $body-bg;
        }

        .van-tab--active {
            color: #fff;
            background-color: $active-bg;
        }

        .van-cell {
            padding: 10px;
            margin-top: 10px;
            background-color: #f9fafc;
            border: 1px solid $body-bg;
        }

        .van-icon-arrow {
            transition: transform 0.5s;
        }

        .van-collapse-item__title--expanded {
            .van-icon-arrow {
                transform: rotate(90deg);
            }
        }

        .van-collapse-item__content {
            color: var(--van-cell-text-color);
        }
    }

    .problem-answer {
        .badge {
            width: 30px;
            height: 30px;
            margin-left: 10px;
            font-size: 20px;
            color: #fff;
            background-color: #ec5a5a;
        }
    }
</style>
